<template>
    <div style="width:800px;">
        <el-row>
        <el-col :span="12">编号:{{music.id}}</el-col>
        <el-col :span="12">名字:{{music.name}}</el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            专辑:<el-image style="width: 100px; height: 100px" :src="music.picurl" :fit="fit" />
        </el-col>
        <el-col :span="12">
            歌曲:<audio controls autoplay loop >
                    <source  :src="music.url">
                </audio>
        </el-col>
    </el-row>
    <el-row>
         <el-col :span="12">作者 :{{music.artistsname}}</el-col>
         <el-col :span="12">类型 :{{music.type.tname}}</el-col>
    </el-row> 
    </div>
</template>

<style scoped>
.el-row{
    height: 60px;
}
</style>

<script setup>
import { ref } from "vue";
const music = ref({
    id:undefined,
    name:"",
    url:"",
    picurl:"",
    artistsname:"",
    typeId:"",
    type:{

    }
})
const querybyid=(id)=>{
    fetch(`http://localhost:3000/musics/${id}?_embed=type`,{
                    method:"get"
                }).then(response=>response.json()).then((data)=>{
                    music.value = data

                })

}
//暴漏接口方法 
defineExpose({querybyid})
</script>